<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inputstream Data Viewer</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <!--
    <link rel="stylesheet" href="tasks-v2.css">
	-->
</head>
<body>
	<div id="queryinput" class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<h3 class="page-header text-center">
					V2V 不同距离下的丢包率测试报告（Lostrate vs. Distance）
				</h3>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<form class="form-horizontal contract-form">
					<!--
					<fieldset>
						<legend><small>请输入查询条件</small></legend> 
					-->
				
					<!--
					<div class="form-group">
						<h5>
						<label class="col-sm-3 control-label" style="text-align:left">请输入查询条件</label>
						</h5>
					</div>
					<hr/>
					-->
					<div class="form-group">
						<label class="col-sm-1 control-label">Id</label>
						<div class="col-sm-4">
							<input id="wineId" name="id" type="text" value="<%= id %>"
								class="form-control contact-name-input" disabled />
						</div>
						<label class="col-sm-2 control-label">Name</label>
						<div class="col-sm-4">
							<input type="text" id="name" name="name" value="<%= name %>"
								class="form-control contact-name-input" required />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-1 control-label">Name</label>
						<div class="col-sm-4">
							<input type="text" id="name" name="name" value="<%= name %>"
								class="form-control contact-name-input" required />
						</div>
						<label class="col-sm-2 control-label">Name</label>
						<div class="col-sm-4">
							<input type="text" id="name" name="name" value="<%= name %>"
								class="form-control contact-name-input" required />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-1 control-label">Grapes</label>
						<div class="col-sm-4">
							<input type="text" id="grapes" name="grapes"
								class="form-control contact-name-input" value="<%= grapes %>" />
						</div>
						<label class="col-sm-2 control-label">Grapes</label>
						<div class="col-sm-4">
							<input type="text" id="grapes" name="grapes"
								class="form-control contact-name-input" value="<%= grapes %>" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-1 control-label">Region</label>
						<div class="col-sm-4">
							<input type="text" id="region" name="region" class="form-control contact-name-input" value="<%= region %>" />
						</div>
						<label class="col-sm-2 control-label">Year</label>
						<div class="col-sm-4">
							<input type="text" id="year" name="year"
								class="form-control contact-name-input" value="<%= year %>" />
						</div>
					</div>
				
					<div class="form-group">
						<label class="col-sm-1 control-label">Notes</label>
						<div class="col-sm-10">
							<textarea id="description" name="description"
								class="form-control contact-name-input"><%= description %></textarea>
						</div>
					</div>
					<hr />
					<div class="form-group">
						<div class="col-sm-offset-6 col-sm-2">
							<button class="btn btn-outline btn-block btn-warning">清除</button>
						</div>
						<div class="col-sm-3">
							<!--
							<button id='submitbutton' type="submit" class="btn btn-outline btn-lg btn-block save">Submit</button>
							-->
							<button id='submitbutton' class="btn btn-outline btn-block btn-success save">提交</button>
						</div>
						
					</div>
					<!--
					</fieldset>	
					-->
				</form>
			</div>
			<div class="span6">
			</div>
		</div>
		<div class="row-fluid">
			<div class="col-sm-12">
			请输入查询条件，点击提交按钮生成统计报告。报告生成可能需要较长时间，请耐心等待...
			</div>
			<div class="span4">
			</div>
			<div class="span4">
				 <button id="addLine" class="btn btn-default" title="Add New Line" data-id="{{blockId}}"></button>
			</div>
			<div class="span4">
				 <button id='search3' class="btn btn-block" type="button">   搜   索   </button>
			</div>
		</div>
		<hr/>
		

	<div id="app" class="" style="padding:20px">
		<div class=""><h2>输入流数据浏览 <small>Inputstream Data Viewer</small></h2></div>
		<hr />
		<!--  <div id="searchDiv" class="" style="background-color:#F0FFFF">  -->
		<div id="searchDiv" class="" style="background-color:#FFFACD">
		<fieldset>
			<!-- <legend></legend> -->
			<p>请输入查询条件</p>
			<form id="inputQuery">
			Begin Time <input type="text" name="begintime" v-model="begintime">
			End Time <input type="text" name="endtime" v-model="endtime">
			Remote Device Id <input type="text" name="remotedevice" v-model="remotedevice">
			Search <input name="query" v-model="searchQuery">
			</form>
			<div class="" >
				<button class="btn btn-primary" style="float:right" v-on="click:search">....    查 ... 询    ....</button>
				<br />
			</div>
		</fieldset>
		</div>
		<hr />
		<div>
			<button class="btn btn-default " v-on="click:removeSelected($event)">删除选中记录</button>
		</div>
		<div class="table-responsive">
			<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr class="info"> 
				<th>选择</th> 
				<th>时刻</th> 
				<th>设备标识</th> 
				<th>数据</th> 
				</tr> 
				<tr> 
				<th>#</th> 
				<th>Timestamp</th> 
				<th>Device Node</th> 
				<th>Payload</th> 
				</tr> 
			</thead>
			<tfoot>Table footer</tfoot>			
			<tbody>
				<!--
				<tr class="list-group-item item" v-repeat="item:items" track-by="rowid">
				-->
				<tr v-repeat="item:items" track-by="rowid">
				<td><input type="checkbox" v-model="item.selected"> {{item.selected ? "yes" : "no"}}</td> 
				<td>{{item.timestamp}}</td> 
				<td>{{item.node}}</td> 
				<td>{{item.frame}}</td> 
				</tr> 
			</tbody>
			</table>
		</div>
	
		<div>
		注：输入流数据来自实际测试过程中记录的数据文件。本模块仅用于查看数据的内容以辅助判断数据的正确性。
		</div>
		
		<hr />
		<div>
		for Debug only: 
		<pre>
			<div>{{ $data | json }}</div>
		</pre>	
		</div>
	</div> <!-- app -->
		
<div class="container" id="guestbook"> 
	<div class="col-md-8 col-md-offset-2">
        <div class="jumbotron">
			<h2>留言簿</h2>
            <h4>Guestbook</h4>
        </div>

        <form v-on="submit: onCreate">
			<div class="form-group">
				<input type="text" class="form-control input-sm" name="author" v-model="author" placeholder="Name">
            </div>

            <div class="form-group">
				<input type="text" class="form-control input-sm" name="text" v-model="text" placeholder="Put here your text">
            </div>

            <div class="form-group text-right">   
				<button type="submit" class="btn btn-primary btn-lg">Submit</button>
            </div>
        </form>

        <div class="comment" v-repeat="comment: comments">
			<h3>Comment #{{comment.id}} <small>by {{comment.author}}</h3>
            <p>{{ comment.text }}</p>
            <p><span class="btn btn-primary text-muted" v-on="click: onDelete(comment)">Delete</span></p>
        </div>
    </div>

</div>


<h2>模态框（Modal）插件事件</h2>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
   开始演示模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" 
               aria-hidden="true">×
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模态框（Modal）标题
            </h4>
         </div>
         <div class="modal-body">
            点击关闭按钮检查事件功能。
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">
               关闭
            </button>
            <button type="button" class="btn btn-primary">
               提交更改
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
		
	</div>

    <script src="../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
    <script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="../../lib/underscore/1.8.3/underscore-min-1.8.3.js"></script>
	<script src="../../lib/backbone/1.2.2/backbone-min.js"></script>
    <script src="../../lib/vue/0.12.10/vue.min.js"></script>
    <script src="member-v2.js"></script>
	
<script>
   $(function () { $('#myModal').modal('hide')})});
</script>
<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('嘿，我听说您喜欢模态框...');})
   });
</script>
	
</body>
</html>